<template>
  <Fragment>
    <el-input v-model="scorerData.searchVal" placeholder="请输入球员姓名" class="input-with-select">
      <template #append>
        <el-button :icon="Search" @click="handleGet" />
      </template>
    </el-input>
    <el-table :data="scorerData.tableData" border>
      <el-table-column prop="rank" label="排名" width="60" />
      <el-table-column prop="idName" label="球员" />
      <el-table-column prop="playerNumber" label="号码" />
      <el-table-column prop="teamName" label="球队" />
      <el-table-column prop="totalScored" label="总进球数" />
      <el-table-column prop="goalScored" label="常规进球" />
      <el-table-column prop="penaltyScored" label="点球进球" />
    </el-table>
  </Fragment>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { getRaceScoreTop } from "@/api/match";
import { useRoute } from "vue-router";

const route = useRoute();
const raceId = ref(0); // 当前赛事的id
const scorerData = reactive({
  searchVal: "",
  tableData: [],
});

const handleGet = async () => {
  const res = await getRaceScoreTop({
    raceId: raceId.value,
    playerName: scorerData.searchVal,
  });
  scorerData.tableData = res.data;
};

onMounted(() => {
  let { id } = route.query;
  raceId.value = Number(id);
  handleGet();
});
</script>
<style lang="scss" scoped>
.input-with-select {
  margin-bottom: 10px;
  width: 35%;
  float: right;
}

.team-name {
  display: flex;
  align-items: center;

  img {
    width: 20px;
    margin-right: 5px;
  }
}
</style>